<template>
  <div>
    <div class="head">
      <div class="logo">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="search" @click="$router.push('/postsearch')">
        <span class="iconfont iconsearch"></span>
        <p>搜索新闻</p>
      </div>
      <div class="user">
        <span class="iconfont iconwode" @click="getUser"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    getUser() {
      this.$router.push("/mycenter");
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

ul,
li,
ol {
  list-style: none;
}
.head {
  display: flex;
  align-content: center;
  // justify-content: center;
  background-color: red;
  .logo {
    .iconnew {
      font-size: 45/360 * 100vw;
      padding-left: 20/360 * 100vw;
      color: #fff;
    }
  }
  .search {
    display: flex;
    align-content: center;
    line-height: 30/360 * 100vw;
    width: 210/360 * 100vw;
    height: 30/360 * 100vw;
    //   border: yellowgreen solid 2px;
    background-color: #f97979;
    border-radius: 20px;
    margin-top: 7 /360 * 100vw;
    margin-left: 7/360 * 100vw;
    p {
      font-size: 14px;
      color: #fff;
    }
    span {
      transform: rotate(10deg);
      margin-left: 63/360 * 100vw;
      margin-right: 3/360 * 100vw;
      color: #cccccc;
      font-size: 15/360 * 100vw;
    }
  }
  .user {
    margin: 8/360 * 100vw 25/360 * 100vw;
    .iconwode {
      font-size: 25/360 * 100vw;
      color: #cccccc;
    }
  }
}
</style>